{layout name="../../admin/view/layout/main" /}
{:breadcrumb(['UI 示例:example/layout/index', '示例页面:example/pages/index', '代码演示示例'])}

<style>
    [data-toggle=buttons] > .btn-group > .btn input[type=checkbox],
    [data-toggle=buttons] > .btn-group > .btn input[type=radio],
    [data-toggle=buttons] > .btn input[type=checkbox],
    [data-toggle=buttons] > .btn input[type=radio] {
        position: absolute;
        clip: rect(0,0,0,0);
        pointer-events: none;
    }
    .code-window {
        border: 1px solid #eceeef;
        border-radius: 3px;
        margin: 30px 0;
        box-shadow: 0 2px 8px rgba(0,0,0,.07)
    }
    .code-window .window-bar {
        height: 38px;
        border-top: 1px solid #eaeae9;
        border-bottom: 1px solid #dfdfde;
        background: #ebebeb
    }
    .code-window .window-bar .circles {
        margin: 6px 10px 0;
        float: left
    }
    .code-window .window-bar .circles .circle {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #fff;
        border: 1px solid #fff
    }
    .code-window .window-bar .circles .circle-red {
        background-color: var(--bs-danger);
        border-color: var(--bs-danger)
    }
    .code-window .window-bar .circles .circle-yellow {
        background-color: var(--bs-warning);
        border-color: var(--bs-warning)
    }
    .code-window .window-bar .circles .circle-green {
        background-color: var(--bs-success);
        border-color: var(--bs-success)
    }
    .code-window .window-bar .circles .window-title {
        margin-left: 16px;
        font-size: 13px;
        color: #818a91
    }
    .code-window .window-bar .languages {
        margin: 6px 10px 0;
        float: right
    }
    .code-window .window-bar .languages .btn {
        padding: 2px 10px;
        background-color: #fff;
        color: #ccc;
        text-transform: uppercase;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.5;
        letter-spacing: 0;
        margin-top: 0;
        border: none;
        transition: all .4s ease
    }
    .code-window .window-bar .languages .btn.active,
    .code-window .window-bar .languages .btn:active {
        color: var(--bs-info);
        box-shadow: none
    }
    .code-window:not(pre)>code[class*=language-],
    .code-window pre[class*=language-] {
        background-color: #fff;
        border: none;
        margin: 0;
        padding-bottom: 10px;
        max-height: 585px
    }
    .code-window pre[class*=language-][data-language]:before {
        display: none
    }
    .code-window .line-numbers .line-numbers-rows {
        background-color: #f7f7f7;
        border-right: none;
        padding-bottom: 8px
    }
    .code-window .line-numbers-rows>span:before {
        color: #ccc
    }
    .code-window .line-numbers:after {
        content: '';
        background-color: #f7f7f7;
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        width: 3em;
        height: 20px
    }
    .code-preview {
        padding: 16px
    }
    
    /* 代码样式 */
    code[class*="language-"],
    pre[class*="language-"] {
        color: black;
        background: none;
        text-shadow: 0 1px white;
        font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
        font-size: 1em;
        text-align: left;
        white-space: pre;
        word-spacing: normal;
        word-break: normal;
        word-wrap: normal;
        line-height: 1.5;
    
        -moz-tab-size: 4;
        -o-tab-size: 4;
        tab-size: 4;
    
        -webkit-hyphens: none;
        -moz-hyphens: none;
        -ms-hyphens: none;
        hyphens: none;
    }
    
    pre[class*="language-"]::-moz-selection,
    pre[class*="language-"] ::-moz-selection,
    code[class*="language-"]::-moz-selection,
    code[class*="language-"] ::-moz-selection {
        text-shadow: none;
        background: #b3d4fc;
    }
    
    pre[class*="language-"]::selection,
    pre[class*="language-"] ::selection,
    code[class*="language-"]::selection,
    code[class*="language-"] ::selection {
        text-shadow: none;
        background: #b3d4fc;
    }
    
    @media print {
        code[class*="language-"],
        pre[class*="language-"] {
            text-shadow: none;
        }
    }
    
    /* Code blocks */
    pre[class*="language-"] {
        padding: 1em;
        margin: .5em 0;
        overflow: auto;
    }
    :not(pre) > code[class*="language-"],
    pre[class*="language-"] {
        background: #f5f2f0;
    }
    
    /* Inline code */
    :not(pre) > code[class*="language-"] {
        padding: .1em;
        border-radius: .3em;
        white-space: normal;
    }
    
    .token.comment,
    .token.prolog,
    .token.doctype,
    .token.cdata {
        color: slategray;
    }
    
    .token.punctuation {
        color: #999;
    }
    
    .namespace {
        opacity: .7;
    }
    
    .token.property,
    .token.tag,
    .token.boolean,
    .token.number,
    .token.constant,
    .token.symbol,
    .token.deleted {
        color: #905;
    }
    
    .token.selector,
    .token.attr-name,
    .token.string,
    .token.char,
    .token.builtin,
    .token.inserted {
        color: #690;
    }
    
    .token.operator,
    .token.entity,
    .token.url,
    .language-css .token.string,
    .style .token.string {
        color: #9a6e3a;
        background: hsla(0, 0%, 100%, .5);
    }
    
    .token.atrule,
    .token.attr-value,
    .token.keyword {
        color: #07a;
    }
    
    .token.function,
    .token.class-name {
        color: #DD4A68;
    }
    
    .token.regex,
    .token.important,
    .token.variable {
        color: #e90;
    }
    
    .token.important,
    .token.bold {
        font-weight: bold;
    }
    .token.italic {
        font-style: italic;
    }
    
    .token.entity {
        cursor: help;
    }
    
    /*  */
    pre.line-numbers {
        padding-left: 3.8em;
        counter-reset: a
    }
    pre.line-numbers,pre.line-numbers>code {
        position: relative
    }
    .line-numbers .line-numbers-rows {
        position: absolute;
        pointer-events: none;
        top: 0;
        font-size: 100%;
        left: -3.8em;
        width: 3em;
        letter-spacing: -1px;
        border-right: 1px solid #999;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none
    }
    .line-numbers-rows>span {
        pointer-events: none;
        display: block;
        counter-increment: a
    }
    .line-numbers-rows>span:before {
        content: counter(a);
        color: #999;
        display: block;
        padding-right: .8em;
        text-align: right
    }
    pre[class*=language-] {
        position: relative
    }
    pre[class*=language-][data-language]:before {
        content: attr(data-language);
        color: #000;
        background-color: #cfcfcf;
        display: inline-block;
        position: absolute;
        top: 0;
        right: 0;
        font-size: .9em;
        border-radius: 0 0 0 5px;
        padding: 0 .5em;
        text-shadow: none
    }
    </style>


<div class="row">

    <div class="col-lg-12">
      <div class="card">
        <div class="card-body">
        
          <p>HTML+CSS+JS代码按照相应的格式，便可呈现以下的效果，在文章中能直接演示并且切换查看代码，相当的方便，不过要注意的是，因为是直接在页面中的，可能会受到当前页面样式对示例的影响。</p>
        <div class="code-window">
          <div class="code-preview">
            <p>This is a normal paragraph without any contextual classes.</p>
            <p class="text-primary">A paragraph with .text-primary class.</p>
            <p class="text-success">A paragraph with .text-success class.</p>
            <p class="text-info">A paragraph with .text-info class.</p>
            <p class="text-warning">A paragraph with .text-warning class.</p>
            <p class="text-danger">A paragraph with .text-danger class.</p>
            <p class="text-gray">A paragraph with .text-gray class.</p>
            <p class="text-dark">A paragraph with .text-dark class.</p>
          </div>

          <pre class="line-numbers"><code class="language-html">&lt;p&gt;This is a normal paragraph without any contextual classes.&lt;/p&gt;
&lt;p class=&quot;text-primary&quot;&gt;A paragraph with .text-primary class.&lt;/p&gt;
&lt;p class=&quot;text-success&quot;&gt;A paragraph with .text-success class.&lt;/p&gt;
&lt;p class=&quot;text-info&quot;&gt;A paragraph with .text-info class.&lt;/p&gt;
&lt;p class=&quot;text-warning&quot;&gt;A paragraph with .text-warning class.&lt;/p&gt;
&lt;p class=&quot;text-danger&quot;&gt;A paragraph with .text-danger class.&lt;/p&gt;
&lt;p class=&quot;text-gray&quot;&gt;A paragraph with .text-gray class.&lt;/p&gt;
&lt;p class=&quot;text-dark&quot;&gt;A paragraph with .text-dark class.&lt;/p&gt;
          </code></pre>

          <pre class="line-numbers"><code class="language-css">.text-primary { color: #2196F3; }
.text-success { color: #4CAF50; }
.text-info    { color: #29B6F6; }
.text-warning { color: #FF9800; }
.text-danger  { color: #F44336; }
.text-purple  { color: #6D5CAE; }
.text-teal    { color: #00BFA5; }
.text-gray    { color: #bbbbbb; }
.text-dark    { color: #424242; }
.text-white   { color: #ffffff; }
          </code></pre>

          <pre class="line-numbers"><code class="language-javascript">$('.sidenav.dropable > li > a').click(function(e){
if ( 0 == $(this).next("ul").size() || 0 == $(this).next("ul:hidden").size() ) {
    return;
}
e.preventDefault();
$(this).parents(".sidenav").find("ul").not(":hidden").slideUp(300);
$(this).next("ul").slideDown(300);
});
          </code></pre>

        </div>
        
        </div>
      </div>
  </div>

</div>
<script type="text/javascript" src="{$xpConfig['web_static']}/js/prism.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".code-window").each(function(a, b) {
            var c = '<div class="window-bar"><div class="circles">';
          
            c += '<span class="circle circle-red"></span> <span class="circle circle-yellow"></span> <span class="circle circle-green"></span>',
            
            $(this).attr("data-title") && (c += '<span class="window-title">' + $(this).data("title") + "</span>"),
            
            c += "</div>",
            
            $(this).children().length > 1 && (c += '<div class="languages"><div class="btn-group" data-toggle="buttons">', $(this).children().each(function(a, b) {
                var d = "", e = "", f = "";
                0 == a && (d = " active", e = " checked"),
                $(this).children("code").attr("class") ? (f = $(this).children("code").attr("class"), f = f.replace("language-", ""), f = f.toLowerCase(), "markup" == f && (f = "html")) : $(this).hasClass("code-preview") && (f = "示例"),
                c += '<label class="btn' + d + '"><input type="radio" autocomplete="off"' + e + ">" + f + "</label>"
            }), c += "</div></div>"),
            c += "</div>",
            $(this).children(":not(:first)").hide(0),
            $(this).children().wrapAll('<div class="window-content"></div>'),
            $(this).prepend(c);
            var d = $(this).children(".window-content");
            $(this).find(".window-bar .btn-group .btn").on("click",
            function() {
                var a = $(this).index();
                d.children(":visible").fadeOut(200,
                function() {
                    d.children(":eq(" + a + ")").fadeIn(200)
                })
            })
        });
        
        var b = $('[data-toggle="buttons"]');
        b.length > 0 && b.find('.btn').on('click', function() {
            $(this).addClass("active").siblings().removeClass('active');
        });
    });
    </script>